function FenleiModal(){
    this.createDom();
    this.addListener();
     this.load();
}

FenleiModal.template=`<!-- 分类页面 -->
<div style="border:1px solid #e5e5e5; margin-left:350px;margin-top:100px;" class="hide" id="box1">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" style="margin-left: 100px; margin-top: 20px;">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">查看分类</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加分类</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <table class="table table-bordered active list-table">
          <thead>
            <tr class="active">
                <td>分类编号</td>
                <td>分类名称</td>
                <td>分类描述</td>
                <td>备注</td>
                <td>编辑</td>
                <td>删除</td>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
        <nav aria-label="Page navigation">
             <ul class="pagination"></ul>
        </nav>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">

      <form class="form-horizontal add-fenlei-form" style="margin-top: 30px;">
          <div class="form-group ">
            <label for="fen" class="col-sm-2 control-label">分类名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="fen" style="width:443px;" placeholder="分类名称" name="fenlei_name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">备注</label>
            <div class="col-sm-10">
             <textarea name="fen" id="tfen" cols="60" rows="10"></textarea>
            </div>
          </div>
          <div class="form-group" >
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="btn btn-default" style="background: #438EB9; color: white;" id="add_fenlei">添加分类</button>
            </div>
          </div>
        </form>
    </div>
    
  </div>

</div>`;
// _tr.data("id")
FenleiModal.listInfoTemplate=`
                    <% for (var i=0; i < fenleis.length; i++){ %>
                        <tr data-id=<%= fenleis[i]._id %> class="modal1">
                            <td><%= i+1 %></td>
                            <td><%= fenleis[i].fenlei_name %></td>
                            <td></td>
                            <td><%= fenleis[i].fen %></td>
                            <td><button class="btn modifi" data-toggle="modal" data-target="#modifiModal">修改</button></td>
                            <td><button class="btn remove">删除</button></td>
                        </tr>
                        <% } %>
                            
                            `;
FenleiModal.paginationTemplate =`
                        <% for (var i = 1; i <= totalPages; i++) {%>
                            <li class="<%=currentPage == 1 ? 'active' : '' %> "><a href="#"><%= i %></a></li>
                        
                            <% } %>
`;
FenleiModal.modifiTemplate=`<div class="modal fade" id="modifiModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
  <form class="form-horizontal modifi-fenlei-form" style="margin-top: 30px;">
        <input type="text" class="id" name="id" style="display:none;">
  <div class="form-group ">
    <label for="fen" class="col-sm-2 control-label">分类名称</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="fen_modifi" style="width:443px;" placeholder="分类名称" name="fenlei_name">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">备注</label>
    <div class="col-sm-10">
     <textarea name="fen" id="tfen_modifi" cols="60" rows="10"></textarea>
    </div>
  </div>
  <div class="form-group" >
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn btn-default" style="background: #438EB9; color: white;" id="modifi_fenlei">修改</button>
      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    </div>
  </div>
</form>
  </div>
</div>
</div>`;

$.extend(FenleiModal.prototype, {
	// 创建DOM元素并渲染
	createDom() {
		$(FenleiModal.template).appendTo("body");
	},
	// 注册事件监听
	addListener() {
		
        $("#fenlei").on("click", this.fenleiHandler);
        //添加
        $("#add_fenlei").on("click",this.addFenleiHandler);
        //翻页
        $(".pagination").on("click","li",this.loadByPage);
       
	},
	// 登录业务处理
	fenleiHandler() {
        $("#box1").removeClass("hide");
        $("#box1").show();
        $("#box2").hide();
        $("#box3").hide();
        $("#box4").hide();
        $("#box5").hide();
        $("#box6").hide();
        $("#box7").hide();
    },
    load(){
        
        this.loadByPage(1);
        $(FenleiModal.modifiTemplate).appendTo("body");
    },
    loadByPage(event){
		let page;
		if (typeof event === "number") // 直接传递页码
			page = event;
		else { // 获取待加载页码			
			
			page = $(event.target).text();
		}

		// 读取page页数据
		$.getJSON("/fenleis/list?page=" + page, data=>{
			
			const fenleis = data.res_body.data;
			// EJS渲染模板
			const html = ejs.render(FenleiModal.listInfoTemplate, {fenleis});
			// 显示
			$(".list-table tbody").html(html);

			// 显示页码数据
			const pagination = ejs.render(FenleiModal.paginationTemplate, {totalPages: data.res_body.totalPages, currentPage : page})
			$(".pagination").html(pagination);
		}).done(function(){
            $(".modal1").on("click",".modifi", function(){
            const _tr = $(this).parents("tr"),
            id = _tr.data("id"),
            fenlei_name=_tr.children().eq(1).text(),
            fen=_tr.children().eq(3).text();
            $("#fen_modifi").val(fenlei_name);
            $("#tfen_modifi").val(fen);
            $(".id").val(id);
           
            
             })
        }).done(function(){
            $("#modifi_fenlei").on("click",function(){
               const data = $(".modifi-fenlei-form").serialize();
               $.post("fenleis/update",data,(res_data)=>{
                   if(res_data.res_code===1){
                    location="/index.html"
                   }
                   
               },"json");
            })
        }).done(function(){
            $(".modal1").on("click",".remove",function(){
                const _tr = $(this).parents("tr"),
                _id = _tr.data("id");
                $.post("fenleis/remove",{_id},(res_data)=>{
                    if(res_data.res_code===1){
                        location="/index.html"
                       }
                    console.log(res_data)
                },"json");

            })
        })
    },
    addFenleiHandler() {
	
        const data = $(".add-fenlei-form").serialize();
        console.log(data);
		$.post("/fenleis/add", data, (data)=>{
			
		}, "json");
        alert("添加成功");
        location="/index.html";
    },
   
}); 

new FenleiModal();